<template>
  <div class="page">
    <!-- 顶部导航 -->
    <van-nav-bar
        left-arrow
        @click-left="goBack"
        class="navbar"
    >
      <template #title>
        <van-search
            v-model="value"
            placeholder="搜索菜谱"
            @search="onSearch"
            shape="round"
            background="#fff"
            class="search"
        />
      </template>
    </van-nav-bar>

    <!-- 菜谱列表 -->
    <div class="recipe-list">
      <div v-for="item in recipes" :key="item.id" class="recipe-card">
        <!-- 封面图 - 添加点击事件 -->
        <img
            class="cover"
            :src="item.coverImage"
            alt="cover"
            @click="goToDetail(item)"
            style="cursor: pointer"
        />

        <!-- 右边信息 -->
        <div class="info">
          <!-- 标题 - 也可以添加点击跳转 -->
          <div class="title" @click="goToDetail(item)" style="cursor: pointer">{{ item.title }}</div>

          <!-- 作者头像 + 名称 -->
          <div class="author">
            <img class="author-avatar" :src="item.user.avatar || defaultAvatar" alt="avatar" />
            <span class="author-name">{{ item.user.username || '用户ID：' + item.userId }}</span>
          </div>

          <!-- 点赞数 -->
          <div class="likes">
            <van-icon name="eye-o" />
            <span>查看：{{ item.viewCount || 0 }}</span>
            <van-icon name="like-o" size="14" color="#f44336" />
            <span>点赞：{{ item.likeCount || 0 }}</span>
            <van-icon name="star-o" size="14" color="#f44336" />
            <span>收藏：{{ item.collectCount || 0 }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
import { onMounted, ref } from "vue";
import api from "@/api";
import { showFailToast } from "vant";
import 'vant/lib/toast/style'

const router = useRouter()
const value = ref('');
const recipes = ref([])
const route = useRoute()

// 默认头像
const defaultAvatar = 'https://img.yzcdn.cn/vant/user-active.png'

onMounted(() => {
  onSearch(route.query.search)
})

const onSearch = (val) => {
  value.value = val
  api.postReq("/recipe/getRecipesByType?type=" + val).then(res => {
    if (res.data.code == 1) {
      // 后端最好返回 authorAvatar、authorName 等字段
      recipes.value = res.data.data
    } else {
      showFailToast(res.data.msg)
    }
  })
}

const goBack = () => {
  router.back()
}

// 新增：跳转到详情页的方法
const goToDetail = (item) => {
  router.push({
    path: '/recipe-detail',  // 目标页面的路由路径
    query: { id: item.id }   // 传递菜谱ID参数
  })
}
</script>

<style scoped>
.page {
  background: #f8f8f8;
  min-height: 100vh;
}

.navbar {
  background-color: #fff;
}

.search {
  width: 220px;
}

.recipe-list {
  padding: 10px;
}

.recipe-card {
  display: flex;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  margin-bottom: 12px;
  overflow: hidden;
}

.cover {
  width: 120px;
  height: 90px;
  object-fit: cover;
}

.info {
  flex: 1;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
}

.title {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  line-height: 1.4;
}

.author {
  display: flex;
  align-items: center;
  margin: 4px 0;
  gap: 6px;
}

.author-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}

.author-name {
  font-size: 16px;
  color: #666;
}

.likes {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #999;
  gap: 4px;
  margin-top: 4px;
}
</style>
